<template>
  <div class="vadio">
    <h3>直播管理</h3>
    <div class="vadioInner">
      <div class="select">
        <span>直播状态:</span>
        <el-select v-model="value" placeholder="请选择" @change="changeValue">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <div class="inp">
          <span>经纪人搜索:</span>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </div>
      <div class="dlList">
        <h4>全部直播</h4>
        <div class="dlInner">
          <dl v-for="(v, i) in data" :key="i">
            <dt>
              <img :src="v.img" alt />
              <p>{{ v.title }}</p>
            </dt>
            <dd>
              <p>
                <span>{{ v.name }}</span>
                <span>{{ v.date }}</span>
              </p>
              <p>
                <span>进入直播</span>
                <el-switch :value="true" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </p>
            </dd>
          </dl>
        </div>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "直播中",
          label: "直播中"
        },
        {
          value: "已结束",
          label: "已结束"
        }
      ],
      value: "",
      input: "",
      data: [],
      currentPage4: 1,
      total: null,
      pageNum: 1,
      pageSize: 6
    };
  },
  methods: {
    search() {
      this.$http
        .post("/api/searchName", {
          name: this.input
        })
        .then(res => {
          this.data = res.data.data;
          this.$message.success(res.data.message);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getVadio(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getVadio(this.pageNum, this.pageSize);
    },
    changeValue(value) {
      console.log(value);
      this.$http
        .post("/api/select", {
          ongoing: value
        })
        .then(res => {
          if (res.data.code === 1) {
            this.data = res.data.data;
            this.$message.success(res.data.message);
          }
        });
    },
    //获取数据
    getVadio(pageNum, pageSize) {
      this.$http
        .post("/api/getVadio", {
          pageNum: pageNum,
          pageSize: pageSize
        })
        .then(res => {
          if (res.data.code === 1) {
            this.data = res.data.data;
            this.total = res.data.total;
          }
        });
    }
  },
  created() {
    this.getVadio(this.pageNum, this.pageSize);
  }
};
</script>

<style lang="scss" scoped>
.vadio {
  width: 100%;
  min-height: 500px;
}
.vadioInner {
  width: 100%;
  min-height: 500px;
  background: white;
  margin: 10px 0;
  padding: 10px;
  position: relative;
  .select {
    // width: 100%;
    // height: 50px;
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    span{
      display: inline-block;
      width: 100px;
    }
  }
}
.inp {
  width: 70%;
  display: flex;
  align-items: center;
  padding-left: 20px;
  // justify-content: space-around;
  span {
    display: inline-block;
    width: 100px;
  }
  .el-input {
    width: 500px;
  }
}
.dlList {
  width: 100%;
  min-height: 500px;
  .dlInner {
    width: 95%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    flex-wrap: wrap;
    dl {
      width: calc(100% / 4);
      height: 300px;
      line-height: 30px;
      margin: 0 25px;
      dt {
        width: 100%;
      }
      dt img {
        width: 100%;
        height: 170px;
      }
      dd {
        width: 100%;
        text-align: center;
      }
      dd p:nth-child(1) {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      dd p:nth-child(2) {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      dd p:nth-child(2) span:nth-child(1) {
        color: skyblue;
      }
    }
  }
}
.block {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>